<template>
  <div class="myShare">
    <h3>我的共享</h3>
    <div class="info">
      <div class="condition">
        <div class="left">
          标题
          <input type="text" v-model="title" />
          所属时间
          <!-- <el-date-picker
            v-model="fileTime"
            format="yyyy-MM"
            type="month"
            value-format="yyyy-MM"
            :picker-options="endDateDisabled"
            style="width: 140px; margin-right: 15px;"
          ></el-date-picker>-->
          <el-select v-model="fileYear" class="fileYear">
            <el-option
              v-for="item in yearOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-select v-model="fileMonth" class="fileYear" style="margin-right: 20px;">
            <el-option
              v-for="item in monthOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>栏目
          <el-select v-model="typeId" class="fileYear" style="width: 120px; margin-right: 15px;">
            <el-option label="专题分析" value="1"></el-option>
            <el-option label="经营通报" value="2"></el-option>
          </el-select>状态
          <el-select v-model="status" class="fileYear" style="width: 120px; margin-right: 15px;">
            <el-option label="已发布" value="1"></el-option>
            <el-option label="未发布" value="0"></el-option>
          </el-select>
          <el-button
            type="primary"
            style="background: #7f92f7;border-color: #7f92f7; padding: 8px 15px;"
            @click="goSearch"
            size="small"
          >查询</el-button>
        </div>
        <div class="right">
          <el-button
            type="primary"
            style="background: #7f92f7;border-color: #7f92f7;padding: 8px 15px;"
            size="small"
            @click="nextPath('/budget/knowledgSharing/uploadShare1')"
          >上传分享</el-button>
        </div>
      </div>
      <div class="table" style="width: 100%;">
        <el-table
          style="width: 100%;"
          border
          :data="myShareTable"
          v-loading="dataLoading"
          :header-cell-style="{background:'#d7e5fb',color:'#464C69', padding: '6px 0', 'font-size': '12px'}"
          :cell-style="{padding: '8px 0',color:'#21263E', 'font-size': '12px'}"
          max-height="500px"
        >
          <el-table-column prop="typeName" align="center" width="120" label="栏目" />
          <el-table-column
            prop="title"
            align="center"
            :show-overflow-tooltip="true"
            min-width="400"
            label="标题"
          />
          <el-table-column prop="clickNum" align="center" width="125" label="点击" />
          <!--状态（0：待发布 1,：待审核 2：审核通过 3：审核失败）  -->
          <el-table-column prop="status" align="center" label="状态" width="120">
            <template slot-scope="scope">
              <span>{{scope.row.status == 0 ? '未发布' : '已发布'}}</span>
              <!-- <span v-if="scope.row.status == 1">已发布</span> -->
            </template>
          </el-table-column>
          <el-table-column prop="createTime" align="center" min-width="160" label="修改时间" />
          <el-table-column prop="fileTime" align="center" width="115" label="时间" />
          <el-table-column label="操作" width="230" align="center">
            <template slot-scope="scope">
              <span
                style="color:#7f92f7; font-size:12px;cursor: pointer;padding-left: 10px;"
                @click="handleClick(scope.$index, scope.row)"
              >查看详情</span>
              <span
                style="color:#7f92f7; font-size:12px;cursor: pointer; display: inline-block; padding: 0 40px;"
                @click="handleEdit(scope.$index, scope.row)"
              >修改</span>
              <span
                style="color:#f3707c; font-size:12px;cursor: pointer;"
                @click="handleDelete(scope.$index, scope.row)"
              >删除</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 翻页 -->
      <!-- <div class="page" v-if="dataTotal">
        <el-pagination
          layout="total,sizes, prev, pager, next, jumper"
          :page-sizes="[10, 50, 100]"
          @size-change="sizeChange"
          :page-size="pageSize"
          :total="dataTotal"
          :current-page.sync="currentPage"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>-->

      <!-- 翻页 -->
      <div class="page" v-if="dataTotal">
        <span class="jumper">
          <span class="go" @click="searchSize">跳至</span>
          <input
            @keyup="vaildSize"
            v-model="currentPageInput"
            class="num"
            min="1"
            type="number"
            autocomplete="off"
          />页
        </span>
        <!-- <span class="sizes">
          <el-select @change="currentSel" v-model="pageSize" class="sizeinput">
            <el-option
              v-for="item in pagesOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </span>-->
        <el-pagination
          layout="prev, pager, next, sizes"
          :page-sizes="[10, 50, 100]"
          @size-change="sizeChange"
          :page-size="pageSize"
          :total="dataTotal"
          :current-page.sync="currentPage"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { $budgetAPI } from "@/api";
import { _formatYMD } from "@/utils/common";

export default {
  data() {
    return {
      dataLoading: "",
      typeId: "",
      title: "",
      fileTime: "",
      status: "",
      endDateDisabled: {
        disabledDate: time => {
          // return time.getTime() > Date.now() - 8.64e7;
          return time.getTime() > Date.now();
        }
      },
      myShareTable: [],
      yearOptions: [
        {
          value: "",
          label: "全部"
        }
      ],
      fileYear: "",
      monthOptions: [
        {
          value: "",
          label: "全部"
        },
        {
          value: "01",
          label: "1月"
        },
        {
          value: "02",
          label: "2月"
        },
        {
          value: "03",
          label: "3月"
        },
        {
          value: "04",
          label: "4月"
        },
        {
          value: "05",
          label: "5月"
        },
        {
          value: "06",
          label: "6月"
        },
        {
          value: "07",
          label: "7月"
        },
        {
          value: "08",
          label: "8月"
        },
        {
          value: "09",
          label: "9月"
        },
        {
          value: "10",
          label: "10月"
        },
        {
          value: "11",
          label: "11月"
        },
        {
          value: "12",
          label: "12月"
        }
      ],
      // pagesOptions: [
      //   {
      //     value: 10,
      //     label: "10条/页"
      //   },
      //   {
      //     value: 50,
      //     label: "50条/页"
      //   },
      //   {
      //     value: 100,
      //     label: "100条/页"
      //   }
      // ],
      fileMonth: "",
      currentPage: 1,
      pageSize: 10,
      dataTotal: 0,
      currentPageInput: 1,
      totalPage: ""
    };
  },
  created() {
    this.getYears();
  },
  methods: {
    goSearch() {
      this.getData();
    },
    getData() {
      let time = this.fileTime.split("-");
      this.dataLoading = true;
      $budgetAPI.myShareFiles(
        {
          title: this.title,
          fileYear: this.fileYear,
          fileMonth: this.fileMonth,
          typeId: this.typeId,
          status: this.status,
          currentPage: +this.currentPage,
          pageSize: this.pageSize
        },
        res => {
          this.alertError(res);
          if (res.code == 0) {
            res.content.items.map(it => {
              it.fileTime = it.fileYear + "/" + it.fileMonth;
              it.createTime = _formatYMD(it.createTime);
            });
            this.myShareTable = res.content.items;
            this.dataTotal = res.content.totalNum;
            this.currentPage = res.content.currentPage;
            this.totalPage = res.content.totalPage;
          }
          this.dataLoading = false;
        }
      );
    },
    nextPath(path) {
      this.$router.push({ name: "uploadShare" });
    },
    handleClick(index, row) {
      this.fileId = row.fileId;
      this.$router.push({
        path: "/budget/uploadShareDetail",
        query: { seq: row.fileId }
      });

      // this.$router.push({
      //   name: "uploadShareDetail",
      //   params: { seq: row.fileId }
      // });
    },
    handleEdit(index, row) {
      // this.fileId = row.fileId;
      // this.$router.push({
      //   path: "/budget/knowledgSharing/uploadShare",
      //   query: { seq: row.fileId }
      // });
      this.$router.push({
        name: "uploadShare",
        params: { seq: row.fileId }
      });
    },
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          $budgetAPI.shareDeleteFiles(
            { fileId: row.fileId },
            res => {
              this.alertError(res);
              if (res.code == 0) {
                this.$message({
                  type: "success",
                  message: "删除成功"
                });
                this.getData();
              }
            },
            err => {}
          );
        })
        .catch(() => {});
    },
    getYears() {
      let that = this,
        year = new Date().getFullYear() + "";
      // m = new Date().getMonth() + 1,
      // mm = m < 10 ? "0" + m : m;

      $budgetAPI.shareForyears({}, res => {
        console.log(res);
        res.content.map((it, i) => {
          that.yearOptions.push({ value: "" + it, label: it });
        });
        that.fileYear = year;
        that.fileMonth = "";
        that.getData();
      });
    },
    //页码改变
    sizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(page) {
      this.currentPage = +page;
      //将当前页传到保存的form表单
      // this.begin = page;
      this.getData();
    },
    // searchSize(val) {
    //   console.log(val);
    //   this.currentPage = +val.target.value;
    //   this.getData();
    // },
    searchSize() {
      this.currentPage = +this.currentPageInput;
      this.getData();
    },
    // currentSel(val) {
    //   this.sizeChange(val);
    // },
    vaildSize(e) {
      this.$nextTick(() => {
        if (!this.currentPageInput) {
          return;
        }
        if (!isNaN(this.currentPageInput)) {
          if (+this.currentPageInput < 1) {
            this.currentPageInput = 1;
          } else if (+this.currentPageInput > this.totalPage) {
            this.currentPageInput = this.totalPage;
          } else {
            this.currentPageInput = this.currentPageInput;
          }
        } else {
          this.currentPageInput = 1;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
$fontColor: #6a82fd;
$title: #666;
$borderColor: #ddd;
$fontSize: 16px;

body {
  height: 100%;
}
.myShare {
  border-radius: 2px;
  height: 100%;
  h3 {
    padding: 15px 17px;
    border-bottom: 1px solid #dedede;
    text-align: left;
    color: $fontColor;
    font-size: $fontSize;
  }
  .info {
    margin: 10px;
    .condition {
      display: flex;
      align-items: center;
      justify-items: center;
      justify-content: space-between;
      .left {
        color: $title;
        .fileYear {
          width: 85px;
          height: 30px;
          /deep/ .el-input__inner {
            border-radius: 0;
            border: 1px solid #ddd;
            height: 30px;
            font-size: 12px;
            color: #333;
          }
        }
      }
      input {
        border: 1px solid $borderColor;
        height: 30px;
        width: 120px;
        padding: 0 10px;
        width: 200px;
        margin-right: 15px;
      }
      /deep/ .el-input__icon {
        line-height: 30px;
      }
    }
    .table {
      margin-top: 10px;
      /deep/ .el-table .cell {
        color: #636d9a;
      }
    }
    .page {
      display: flex;
      align-items: center;
      flex-flow: row-reverse;
      .sizes {
        margin-left: 20px;
        margin-right: 16px;
        .sizeinput {
          /deep/ .el-input__inner {
            width: 100px;
            border-radius: 0;
            border: 1px solid #aaa;
            height: 30px;
            font-size: 12px;
            color: #aaa;
            border-radius: 3px;
          }
          /deep/ .el-input__icon {
            line-height: 30px;
          }
        }
      }

      .jumper {
        font-size: 13px;
        color: #aaa;
        height: 30px;
        line-height: 30px;
        .go {
          display: inline-block;
          cursor: pointer;
          color: #aaa;
          &:hover {
            color: #6a82fd;
          }
        }
        .num {
          max-width: 40px;
          padding: 0 10px;
          height: 30px;
          line-height: 30px;
          vertical-align: middle;
          border-radius: 3px;
          border: 1px solid #aaa;
          color: #aaa;
          margin: 0 10px;
          text-align: center;
        }
        input[type="number"] {
          -moz-appearance: textfield;
        }
        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
          -webkit-appearance: none;
          margin: 0;
        }
      }
    }
    .page /deep/ .el-pagination .btn-next,
    .el-pagination .btn-prev {
      color: #aaa;
    }
    .page /deep/ .el-pagination {
      padding: 0;
    }
    .page /deep/ .el-pager li.active {
      background-color: #6a82fd;
      border-color: #6a82fd;
      color: #fff;
    }
    .page /deep/.el-pager li {
      min-width: 30px;
      height: 30px;
      border: 1px solid #aaa;
      color: #aaa;
      font-weight: 500;
      margin-right: 10px;
      border-radius: 5px;
      &:last-child {
        margin-right: 0;
      }
    }
    .page /deep/ .el-pagination .el-pagination__sizes .el-input__inner {
      border-color: #aaa;
      color: #aaa;
      height: 30px;
      line-height: 30px;
    }
  }
}
/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: #f0f1f5;
}
/deep/ .el-table--border td {
  border-right: 1px solid #cdcfd9;
}
/deep/ .el-table td,
.el-table th.is-leaf {
  border-bottom: 1px solid #cdcfd9;
}
</style>